<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
	<style>
		*{
			margin: 0;padding: 0;
		}
		.big>img{
			width: 300px;
			height:300px ;
			
		}
		.bigs{
			width: 500px;
			height: 500px;
			margin: auto;
			position: absolute;
			top: 0;
			left: 500px;
			display: none;
		}
		.bigs img{
			position: absolute;
            width:500px;
            height:500px;
		}
		.big{
			width: 300px;
			height:300px ;
			margin: auto 250px;
			border: 1px solid #9999;
			position: relative;
			
		}
		.nav{
			width: 900px;
			margin:auto 200px
		}
		.nav img{
			width: 100px;
			height: 100px;
		}
		.cover{
			width: 100px;
			height: 100px;
			background-color: rgb(225, 236, 149);
			z-index: 9999;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0.5;
			
		}
	</style>
	<div class="box">

	</div>
	<div class="big">
		<img src="http://pic.bizhi360.com/litimg/10719.jpg" alt="">
		<div class="cover"></div>
		<div class="bigs">
			<img src="http://pic.bizhi360.com/litimg/10719.jpg" alt="">
		</div>
	</div>
	
	
	<div class="nav">
        <img src="http://pic.bizhi360.com/litimg/10719.jpg" alt="">
        <img src="http://pic.bizhi360.com/litimg/10551.jpg" alt="">
        <img src="http://pic.bizhi360.com/litimg/10550.jpg" alt="">
        <img src="http://pic.bizhi360.com/litimg/10532.jpg" alt="">
    </div>
</body>
<script>
     $(function(){
       $('.nav img').click(function(){
		  var psrc = $(this).attr('src')
		  $('.big img').attr('src',psrc)
	   })
	   $('.big').hover(function(){
		   $('.bigs').css('display','block')
	   },function(){
		$('.bigs').css('display','')
	   })
	   
       
           
       })
    
</script>
</html>